<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>金精矿货值计算器</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f9f9f9;
            padding: 30px;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .container {
            background: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
            width: 100%;
            max-width: 800px;
        }

        .container:hover {
            transform: translateY(-5px);
        }

        h2 {
            color: #2c3e50;
            border-bottom: 3px solid #4a90e2;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }

        .input-group {
            margin: 20px 0;
        }

        label {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            color: #666;
            font-weight: bold;
        }

        input {
            width: 100%;
            max-width: 300px;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        input:focus {
            border-color: #4a90e2;
            box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
            outline: none;
        }

        .result {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #4a90e2;
        }

        .result h3 {
            color: #333;
            margin-top: 0;
        }

        .warning {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 4px;
        }

        .input-group span {
            display: block;
            color: #666;
            margin-top: 4px;
            font-size: 12px;
        }

        button {
            margin-top: 30px;
            padding: 12px 24px;
            background: #4a90e2;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>金精矿货值计算器</h2>
        <div class="input-group">
            <label>毛重 (kg)</label>
            <input type="number" id="A1" step="0.01" placeholder="输入毛重">
        </div>
        <div class="input-group">
            <label>净重 (kg)</label>
            <input type="number" id="B1" step="0.01" placeholder="输入净重">
        </div>
        <div class="input-group">
            <label>水分（小数形式）</label>
            <input type="number" id="C1" step="0.0001" placeholder="例如：0.1524">
            <span class="warning">注意：15.24%需输入0.1524</span>
        </div>
        <div class="input-group">
            <label>金含量 (g/t)</label>
            <input type="number" id="D1" step="0.1" placeholder="输入金含量">
        </div>
        <div class="input-group">
            <label>原发票总含金量 (kg)</label>
            <input type="number" id="E1" step="0.01" placeholder="输入总含金量">
        </div>
        <div class="input-group">
            <label>原发票总货值 (元)</label>
            <input type="number" id="F1" step="0.01" placeholder="输入总货值">
        </div>
        <div class="input-group">
            <label>总运费 (元)</label>
            <input type="number" id="G1" step="0.01" placeholder="输入总运费">
        </div>

        <div class="result">
            <h3>计算结果</h3>
            <p>干重 (H1): <span id="H1">0.00000000</span> kg</p>
            <p>含金量 (I1): <span id="I1">0.00000000</span> kg</p>
            <p>原发票单价 (J1): <span id="J1">0.00000000</span> 元/kg</p>
            <p>总货值 (K1): <span id="K1">0.00000000</span> 元</p>
            <p>报关纯货值 (L1): <span id="L1">0.00000000</span> 元</p>
        </div>
    </div>

    <script>
        // 实时计算函数
        function calculate() {
            // 获取输入值
            const B1 = parseFloat(document.getElementById('B1').value) || 0;
            const C1 = parseFloat(document.getElementById('C1').value) || 0;
            const D1 = parseFloat(document.getElementById('D1').value) || 0;
            const E1 = parseFloat(document.getElementById('E1').value) || 0;
            const F1 = parseFloat(document.getElementById('F1').value) || 0;
            const G1 = parseFloat(document.getElementById('G1').value) || 0;

            // 计算逻辑
            const H1 = B1 * (1 - C1);
            const I1 = (H1 * 0.001) * D1;
            const J1 = E1 === 0 ? 0 : F1 / E1;
            const K1 = I1 * J1;
            const L1 = K1 - G1;

            // 显示结果（保留八位小数）
            document.getElementById('H1').textContent = H1.toFixed(8).replace(/(\.\d+?)0+$/, '$1');
            document.getElementById('I1').textContent = I1.toFixed(8).replace(/(\.\d+?)0+$/, '$1');
            document.getElementById('J1').textContent = J1.toFixed(8).replace(/(\.\d+?)0+$/, '$1');
            document.getElementById('K1').textContent = K1.toFixed(8).replace(/(\.\d+?)0+$/, '$1');
            document.getElementById('L1').textContent = L1.toFixed(8).replace(/(\.\d+?)0+$/, '$1');
        }

        // 绑定输入事件
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', calculate);
        });
    </script>
</body>
</html>